<template>

  <div class="swotch-picture">
    <div class="swotch-picture-title">
      <h3>The Best AI-Powered Webcam Ever</h3>
    </div>

    <div class="swotch-picture-item">
      <ul>
        <li v-for="(item,index) in (SwitchPictureData as any)"
          :key="index"
          @mouseover="highlightItem(index)"
          @mouseleave="resetHighlight"
         >
          <div>
            <img :src="item.src2"
             alt=""
             style="display: block;"
             >
          </div>
          <div class="swotch-picture-item-img2">
            <img :src="item.src1"
             alt=""
              v-if="highlightedIndex === index"
              >
          </div>
        </li>
      </ul>

      <div class="swotch-picture-item-context">
        <p 
        v-if="highlightedIndex !== null"
        >{{ SwitchPictureData[highlightedIndex].content }}</p>
      </div>
    </div>
  </div>





</template>


<script lang="ts">
import { getOthersProduct } from '@/api/api';
import { fa } from 'element-plus/es/locale/index.mjs';


  export default{
    name: "SwitchPicture",
    setup(){
      const data = reactive({
        SwitchPictureData: [],
        ishow: ref(false),
        highlightedIndex: ref(null),
        context: ref(null),
        Interval: ref()
      })



      getOthersProduct('').then((res: any) => {
        data.SwitchPictureData = res._rawValue.title
        console.log(res);
        
      }).catch((err: any) => {
        console.log(err, '请求失败')
      })



      const highlightItem = (index) => {
        data.ishow = true;
        data.highlightedIndex = index
      }


      const resetHighlight = () => {
        data.ishow = false;
        // data.highlightedIndex = null
      }


      const startInterval = () => {
        data.Interval = setInterval(() => {
          data.highlightedIndex = (data.highlightedIndex + 1) % data.SwitchPictureData.length
        },3000)
      }

      const closeInterval = (params: any) => {
        closeInterval(data.Interval)
      }



      onMounted(() => {
        startInterval()
      })



      return{
        ...toRefs(data),
        highlightItem,
        resetHighlight,
        startInterval,
        closeInterval
      }
    }
  }
</script>



<style scoped>

.swotch-picture {
  margin-top: 120px;
  margin-bottom: 100px;
  text-align: center;
  margin: 200px 0;
}

.swotch-picture-title h3 {
  font-size: 30px;
}

.swotch-picture-item {
  padding: 50px  0;
}

.swotch-picture-item ul {
  position: relative;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.swotch-picture-item ul li {

  list-style: none;
}

.swotch-picture-item img {
  height: auto;
  width: 100%;
  object-fit: contain;
}

.swotch-picture-item-img2 {
  position: absolute;
  height: 30px;
  width: 16.5%;
  top: 0px;
  margin-left: 2px;
}

.swotch-picture-item-context p {
  margin-top: 90px;
  font-size: 18px;
}
</style>